<!--
用户高级查询器
-->
<template>
  <el-drawer
    title="用户查询"
    :visible.sync="visible"
    direction="rtl"
    :modal="false"
    :modal-append-to-body="false"
    size="800px"
    @close="onClose"
  >
    <el-tabs v-model="activeTab" tab-position="top" @tab-click="onTabClick">
      <el-tab-pane name="basic">
        <span slot="label">
          <span>基本信息</span>
          <span class="label-info" v-if="nonEmptyFieldCounts['basic']">已设置<span>{{nonEmptyFieldCounts['basic']}}</span>个条件</span>
        </span>
        <el-form ref="form" :model="form" label-width="110px">
          <el-form-item prop="realName" label="姓名">
            <el-input v-model.trim="form.realName" clearable></el-input>
          </el-form-item>
          <el-form-item prop="aliasName" label="昵称">
            <el-input v-model.trim="form.aliasName" clearable></el-input>
          </el-form-item>
          <el-form-item prop="sex" label="性别">
            <radio-options v-model="form.sex" :options="options.gender" clearable />
          </el-form-item>
          <el-form-item label="年龄">
            <el-input-number v-model="form.beginAge" :min="0" :controls="false" style="width: 60px" />
            <span>-</span>
            <el-input-number v-model="form.endAge" :min="0" :controls="false" style="width: 60px" />
            <type-select v-model="ageRange" :items="options.ageRanges" placeholder="快捷选择" style="width:120px" />
          </el-form-item>
          <el-form-item prop="orgIds" label="社区">
            <org-check-tree v-model="form.orgIds" :check-strictly="false" />
          </el-form-item>
          <el-form-item prop="telphone" label="手机号">
            <el-input v-model.trim="form.telphone" clearable></el-input>
          </el-form-item>
          <el-form-item prop="userTypes" label="用户类型">
            <checkbox-options v-model="form.userTypes" :options="options.userType" />
          </el-form-item>
          <el-form-item prop="deviceCode" label="设备号/卡号">
            <el-input v-model.trim="form.deviceCode" clearable></el-input>
          </el-form-item>
          <el-form-item prop="registerTimeRange" label="注册日期">
            <el-date-picker
              v-model="form.registerTimeRange"
              type="daterange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['00:00:00', '23:59:59']"
              style="width: 100%;"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item prop="visitType" label="调访类别">
            <checkbox-options v-model="form.visitType" :options="options.visitType" />
            <radio-options v-model="form.visitTypeJoinPredicate" :options="options.joinPredicate" class="join-predicate-options" />
          </el-form-item>
          <el-form-item prop="firstVisitDate" label="首次调访日期">
            <el-date-picker
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
              v-model="form.firstVisitDate"
              style="width: 100%;"
            />
          </el-form-item>
          <el-form-item prop="idcard" label="身份证">
            <el-input v-model.trim="form.idcard" clearable></el-input>
          </el-form-item>
          <el-form-item prop="nation" label="民族">
            <radio-options v-model="form.nation" :options="options.nation" clearable />
          </el-form-item>
          <el-form-item prop="domicileLocation" label="户籍所在地">
            <area-select
              v-model="form.domicileLocation"
              placeholder="地区"
              clearable
              style="width: 100%;"
            />
          </el-form-item>
          <el-form-item prop="ssn" label="社保卡号">
            <el-input v-model.trim="form.ssn" clearable />
          </el-form-item>
          <el-form-item prop="elderlyCard" label="老年卡证号">
            <el-input v-model="form.elderlyCard" clearable></el-input>
          </el-form-item>
          <el-form-item prop="elderlyCardType" label="老年卡办卡类型">
            <radio-options v-model="form.elderlyCardType" :options="options.elderlyCardType" clearable />
          </el-form-item>
          <el-form-item prop="educationLevel" label="文化程度">
            <radio-options v-model="form.educationLevel" :options="options.educationLevel" clearable />
          </el-form-item>
          <el-form-item prop="hasFaith" label="宗教信仰">
            <radio-options v-model="form.hasFaith" :options="options.haveOrNo" clearable />
          </el-form-item>
          <el-form-item prop="maritalStatus" label="婚姻状况">
            <radio-options v-model="form.maritalStatus" :options="options.maritalStatus" clearable />
          </el-form-item>
          <el-form-item prop="area" label="居住地址">
            <area-select
              v-model="form.area"
              placeholder="地区"
              clearable
              style="width: 200px"
            />
            <el-input v-model.trim="form.address" clearable placeholder="详细" style="width:calc(100% - 204px)" />
          </el-form-item>
          <el-form-item prop="paidMedicalExpenses" label="医疗费支付">
            <checkbox-options v-model="form.paidMedicalExpenses" :options="options.paidMedicalExpenses" />
            <radio-options v-model="form.paidMedicalExpensesJoinPredicate" :options="options.joinPredicate" class="join-predicate-options" />
          </el-form-item>
          <el-form-item prop="specialTypes" label="特殊老人">
            <checkbox-options v-model="form.specialTypes" :options="options.specialTypes" />
            <radio-options v-model="form.specialTypesJoinPredicate" :options="options.joinPredicate" class="join-predicate-options" />
          </el-form-item>
          <el-form-item prop="ability" label="能力评估">
            <radio-options v-model="form.ability" :options="options.ability" clearable />
          </el-form-item>
          <el-form-item prop="liveStatus" label="居住状况">
            <radio-options v-model="form.liveStatus" :options="options.liveStatus" clearable />
          </el-form-item>
          <el-form-item prop="disease" label="疾病">
            <checkbox-options v-model="form.disease" :options="options.disease" />
            <radio-options v-model="form.diseaseJoinPredicate" :options="options.joinPredicate" class="join-predicate-options" />
          </el-form-item>
          <el-form-item prop="hasMajorDisease" label="重大疾病">
            <radio-options v-model="form.hasMajorDisease" :options="options.haveOrNo" clearable />
          </el-form-item>
          <el-form-item prop="majorDiseaseHandled" label="重疾办理">
            <radio-options v-model="form.majorDiseaseHandled" :options="options.yesno" clearable />
          </el-form-item>
          <el-form-item prop="recoveryStatus" label="康复状况">
            <radio-options v-model="form.recoveryStatus" :options="options.recoveryStatus" clearable />
          </el-form-item>
          <el-form-item prop="disability" label="残障">
            <checkbox-options v-model="form.disability" :options="options.disability" />
            <radio-options v-model="form.disabilityJoinPredicate" :options="options.joinPredicate" class="join-predicate-options" />
          </el-form-item>
          <el-form-item prop="homeCareNeeds" label="居家养老">
            <checkbox-options v-model="form.homeCareNeeds" :options="options.homeCareNeeds" />
            <radio-options v-model="form.homeCareNeedsJoinPredicate" :options="options.joinPredicate" class="join-predicate-options" />
          </el-form-item>
          <el-form-item prop="orgCareNeed" label="机构养老">
            <radio-options v-model="form.orgCareNeed" :options="options.haveNeed" clearable />
          </el-form-item>
          <el-form-item prop="hobbies" label="兴趣爱好">
            <checkbox-options v-model="form.hobbies" :options="options.hobby" />
            <radio-options v-model="form.hobbiesJoinPredicate" :options="options.joinPredicate" class="join-predicate-options" />
          </el-form-item>
          <el-form-item prop="hasSkill" label="特长技能">
            <radio-options v-model="form.hasSkill" :options="options.haveOrNo" clearable />
          </el-form-item>
          <el-form-item prop="volunteerServiceCategories" label="志愿者参与">
            <checkbox-options v-model="form.volunteerServiceCategories" :options="options.volunteerServiceCategories" />
            <radio-options v-model="form.volunteerServiceCategoriesJoinPredicate" :options="options.joinPredicate" class="join-predicate-options" />
          </el-form-item>
          <el-form-item prop="homeCareProposal" label="对社区居家养老需求与建议">
            <el-input v-model.trim="form.homeCareProposal" clearable placeholder="关键字" style="line-height: 64px;" />
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane name="cityAllowance">
        <span slot="label">
          <span>市补贴评估对象</span>
          <span class="label-info" v-if="nonEmptyFieldCounts['cityAllowance']">已设置<span>{{nonEmptyFieldCounts['cityAllowance']}}</span>个条件</span>
        </span>
        <el-form ref="cityAllowanceForm" :model="form" label-width="110px">
          <el-form-item prop="isCityAllowanceTarget" label="市补贴评估对象">
            <el-checkbox v-model="form.isCityAllowanceTarget" :true-label="1" />
          </el-form-item>
          <el-form-item prop="applyTypes" label="申请对象类型">
            <checkbox-options v-model="form.applyTypes" :options="options.specialTypes" />
            <radio-options v-model="form.applyTypesJoinPredicate" :options="options.joinPredicate" class="join-predicate-options" />
          </el-form-item>
          <el-form-item prop="cityAllowanceEvalStatus" label="评估状态">
            <radio-options
              v-model="form.cityAllowanceEvalStatus"
              :options="options.cityAllowanceEvalStatus"
              clearable
              filterable
            />
          </el-form-item>
          <el-form-item prop="cityAllowanceEvalScore" label="评估分数">
            <el-input-number v-model="form.cityAllowanceEvalScore" :controls="false" placeholder=">=" />
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane name="other">
        <span slot="label">
          <span>其它</span>
          <span class="label-info" v-if="nonEmptyFieldCounts['other']">已设置<span>{{nonEmptyFieldCounts['other']}}</span>个条件</span>
        </span>
        <el-form ref="otherForm" :model="form" label-width="140px">
          <el-form-item prop="isCityDistrictAllowanceTarget" label="市区两级补贴老人">
            <el-checkbox v-model="form.isCityDistrictAllowanceTarget" :true-label="1" />
          </el-form-item>
          <el-form-item prop="isGrant" label="已享受区级补助老人">
            <el-checkbox v-model="form.isGrant" :true-label="1"></el-checkbox>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
    <div class="footer">
      <el-button type="primary" icon="el-icon-search" :loading="querying" @click="onQueryClick">查询</el-button>
      <el-button type="default" :disabled="nonEmptyFieldCount == 0" @click="onResetClick">重置全部</el-button>
      <el-button type="default" :disabled="nonEmptyFieldCounts[activeTab] == 0" @click="onResetActiveClick">重置当前</el-button>
      <el-alert
        :title="nonEmptyFieldCount ? `已设置总共 ${nonEmptyFieldCount} 个查询条件` : '没有设置查询条件'"
        :closable="false"
        class="status"
      />
    </div>
  </el-drawer>
</template>

<script>
import RadioOptions from '@/components/RadioOptions';
import CheckboxOptions from '@/components/CheckboxOptions';
import AreaSelect from '@/components/area-select/AreaSelect';
import OrgCheckTree from '@/pages/org/OrgCheckTree';

// 按出现在界面的顺序的字段组
const sortedAllFieldGroups = {
  basic: [
    "realName", "aliasName", "sex", "beginAge", "endAge",
    "orgIds", "telphone", "userTypes", "deviceCode", "registerTimeRange",
    "visitType", "visitTypeJoinPredicate", "firstVisitDate",
    "idcard", "nation", "domicileLocation", "ssn",
    "elderlyCard", "elderlyCardType", "educationLevel", "hasFaith", "maritalStatus", "area", "address",
    "paidMedicalExpenses", "paidMedicalExpensesJoinPredicate",
    "specialTypes", "specialTypesJoinPredicate",
    "ability", "liveStatus",
    "disease", "diseaseJoinPredicate",
    "hasMajorDisease", "majorDiseaseHandled", "recoveryStatus",
    "disability", "disabilityJoinPredicate",
    "homeCareNeeds", "homeCareNeedsJoinPredicate",
    "orgCareNeed", "orgCareNeedJoinPredicate",
    "hobbies", "hobbiesJoinPredicate",
    "hasSkill",
    "volunteerServiceCategories",
    "volunteerServiceCategoriesJoinPredicate",
    "homeCareProposal"
  ],
  cityAllowance: ['isCityAllowanceTarget', 'applyTypes', 'cityAllowanceEvalStatus', 'cityAllowanceEvalScore'],
  other: ['isCityDistrictAllowanceTarget', 'isGrant']
};

const mutipleValueFields = [
  'visitType', 'paidMedicalExpenses', 'specialTypes', 'applyTypes',
  'disease', 'disability', 'homeCareNeeds', 'hobbies', 'volunteerServiceCategories'
];

export default {
  components: {
    RadioOptions,
    CheckboxOptions,
    AreaSelect,
    OrgCheckTree
  },
  data() {
    let form = {
      sex: undefined,
      beginAge: undefined,
      endAge: undefined,
      realName: '',
      aliasName: '',
      idcard: '',
      telphone: '',
      deviceCode: '',
      elderlyCard: '',
      minRegisterTime: null,
      minRegisterTime: null,
      registerTimeRange: [],
      userTypes: [],
      orgIds: [],

      firstVisitDate: null,
      nation: null,
      area: null,
      domicileLocation: null,
      ssn: '',
      elderlyCard: '',
      elderlyCardType: null,
      educationLevel: null,
      hasFaith: null,
      maritalStatus: null,
      ability: null,
      hasMajorDisease: null,
      majorDiseaseHandled: null,
      recoveryStatus: null,
      orgCareNeed: null,
      hasSkill: null,
      isGrant: null,
      isCityDistrictAllowanceTarget: null,
      isCityAllowanceTarget: null,
      cityAllowanceEvalStatus: null,
      cityAllowanceEvalScore: undefined
    };

    mutipleValueFields.forEach(field => {
      form[field] = [];
      form[`${field}JoinPredicate`] = '';
    });
    
    // 年龄范围
    let ageRanges = [['', 59], [60, 64], [65, 69], [70, 79], [80, 89], [90, '']];
    for (let i in ageRanges) {
      let [beg, end] = ageRanges[i];
      ageRanges[i] = {
        text: beg && end
          ? `${beg}至${end}`
          : end ? `${end}以下` : `${beg}以上`,
        value: `${beg},${end}`
      };
    }
    ageRanges.unshift({text: '不选择', value: ''});

    let options = {
      yesno: DictMan.items('yesno'),
      haveOrNo: DictMan.items('haveOrNo'),
      gender: DictMan.items('user.gender'),
      userType: DictMan.items('user.type'),
      visitType: DictMan.items('customer.visitType'),
      nation: DictMan.items('nation'),
      educationLevel: DictMan.items('education'),
      maritalStatus: DictMan.items('user.marriage'),
      paidMedicalExpenses: DictMan.items('customer.medicalExpense'),
      specialTypes: DictMan.items('customer.specialType').filter(item => !['21', '22'].includes(item.value)),
      ability: DictMan.items('user.ability'),
      liveStatus: DictMan.items('user.liveStyle'),
      disease: DictMan.items('user.disease'),
      recoveryStatus: DictMan.items('customer.recoveryStatus'),
      disability: DictMan.items('customer.disability'),
      homeCareNeeds: DictMan.items('user.serviceNeed'),
      haveNeed: DictMan.items('customer.haveNeed'),
      hobby: DictMan.items('customer.hobby'),
      volunteerServiceCategories: DictMan.items('volunteer.service'),
      elderlyCardType: DictMan.items('user.elderlyCardType'),
      online: [{text: '在线', value: '1'}, {text: '离线', value: '0'}],
      cityAllowanceEvalStatus: DictMan.items('evalOldman.evalState'),
      joinPredicate: [{text: '或（至少符合一个）', value: 'or'}, {text: '和（同时符合全部）', value: 'and'}],
      ageRanges
    };

    return {
      visible: false,
      querying: false,
      activeTab: 'basic',
      ageRange: null,
      form,
      nonEmptyFieldCounts: {
        basic: 0,
        cityAllowance: 0,
        other: 0
      },
      options
    }
  },
  computed: {
    nonEmptyFieldCount() {
      let cnt = 0;
      for (let group in this.nonEmptyFieldCounts) {
        cnt += this.nonEmptyFieldCounts[group];
      }
      return cnt;
    }
  },
  watch: {
    'form': {
      handler() {
        for (let group in sortedAllFieldGroups) {
          let cnt = 0;
          for (let key of sortedAllFieldGroups[group]) {
            if (this.form[key] != null && this.form[key].toString().length) {
              cnt++;
            }
          }
          this.nonEmptyFieldCounts[group] = cnt;
        }
      },
      deep: true
    },
    'form.beginAge'(value) {
      this.ageRange = null;
    },
    'form.endAge'(value) {
      this.ageRange = null;
    },
    'form.cityAllowanceEvalStatus'(value) {
      if (typeof value == 'number') {
        this.form.isCityAllowanceTarget = 1;
      }
    },
    'form.cityAllowanceEvalScore'(value) {
      if (typeof value == 'number') {
        this.form.isCityAllowanceTarget = 1;
      }
    },
    'form.isCityAllowanceTarget'(value) {
      if (!value) {
        this.form.applyTypes = [];
      } else {
        this.form.applyTypes = this.form.specialTypes;
      }
    },
    ageRange(value) {
      let [beg, end] = value.split(',');
      this.form.beginAge = beg || undefined;//undefined可以置空
      this.form.endAge = end || undefined;
    },
    ...mutipleValueFields.reduce((watchers, field) => {
      // 监听多选值字段
      watchers[`form.${field}`] = function(value) {
        const joinPredField = `${field}JoinPredicate`;
        // 如果选中了多余一个的选项
        if (value.length > 1) {
          // 在用户未选择连接谓词时
          if (!this.form[joinPredField]) {
            // 默认选择or，但如果上次选择了就用上次选择的值
            this.form[joinPredField] = this[`${field}JoinPredicateLastValue`] || 'or';
          }
        } else {
          // 连接谓词在没有选中至少两个选项时没有存在意义
          this.form[joinPredField] = '';
        }

        if (field == 'applyTypes') {
          if (value && value.length) {
            this.form.isCityAllowanceTarget = 1;
          }
          if (this.form.isCityAllowanceTarget) {
            this.form.specialTypes = value;
          }
        }
        if (field == 'specialTypes') {
          if (this.form.isCityAllowanceTarget) {
            this.form.applyTypes = value;
          }
        }
      };
      // 监听多选值字段关联的连接谓词字段
      watchers[`form.${field}JoinPredicate`] = function(value) {
        // 记住最近选择的非空值
        if (value) {
          this[`${field}JoinPredicateLastValue`] = value;
        }
      };
      return watchers;
    }, {}),
    nonEmptyFieldCount(value) {
      this.$emit('change', {
        nonEmptyFieldCount: value,
        queryParams: this.getQueryParams(false)
      });
    }
  },
  methods: {
    show(opts) {
      this.visible = true;
      this.opts = opts;
      // 监听表格查询事件
      if (opts.table) {
        opts.table.$on('loading', (loading) => {
          this.querying = loading;
        });
      }

      let { specialTypes } = opts.values;
      if (specialTypes) {
        specialTypes = typeof specialTypes == 'string' ? [specialTypes] : specialTypes;
        if (specialTypes.includes('21')) {
          opts.values.specialTypes = specialTypes.filter(t => t != 21);
          opts.values.isCityAllowanceTarget = 1;
        }
        if (specialTypes.includes('22')) {
          opts.values.specialTypes = specialTypes.filter(t => t != 22);
          opts.values.isCityDistrictAllowanceTarget = 1;
        }
      }
      // 把传递的过来的初始值 opts.values 设置到表单里
      for (let key in opts.values) {
        if (this.form.hasOwnProperty(key)) {
          this.form[key] = opts.values[key]; 
        }
      }
      // 然后清空 opts.values （它是响应data）
      for (let key in this.form) {
        if (opts.values.hasOwnProperty(key)) {
          opts.values[key] = '';
        }
      }

      this.scrollToFirstNonEmptyFieldPosition(null, true);
    },
    reset() {
      ['form', 'cityAllowanceForm', 'otherForm'].forEach(formName => {
        this.$refs[formName] && this.$refs[formName].resetFields();
      });
      this.form.beginAge = undefined;
      this.form.endAge = undefined;
    },
    onTabClick() {
      this.scrollToFirstNonEmptyFieldPosition(this.activeTab, false);
    },
    onClose() {
      this.opts.onClose(this.getQueryParams(false), this.nonEmptyFieldCount);
    },
    onResetClick() {
      this.reset();
      this.$emit('reset');
    },
    onResetActiveClick() {
      let formName = ({basic: 'form', cityAllowance: 'cityAllowanceForm', other: 'otherForm'})[this.activeTab];
      this.$refs[formName] && this.$refs[formName].resetFields();
      if (formName == 'form') {
        this.form.beginAge = undefined;
        this.form.endAge = undefined;
      }
    },
    onQueryClick() {
      this.query();
    },
    scrollToFirstNonEmptyFieldPosition(inGroup, animate) {
      // 寻找第一个非空字段
      let foundGroup = null, firstNonEmptyField = null;
      for (let group in sortedAllFieldGroups) {
        if (inGroup && group != inGroup) continue;
        for (let field of sortedAllFieldGroups[group]) {
          let val = this.form[field];
          if (val) {
            if ((val.constructor == Array && val.length) ||
                (val.constructor == String || val.constructor == Number)) {
              foundGroup = group;
              firstNonEmptyField = field;
              break;
            }
          }
        }
        if (firstNonEmptyField) break;
      }

      // 滚动条滚动到非空字段表单项的起始位置
      this.$nextTick(() => {
        if (foundGroup && firstNonEmptyField) {
          this.activeTab = foundGroup;
          this.$nextTick(() => {
            let container = this.$el.querySelector('.el-tabs__content');
            let target = this.$el.querySelector(`[for=${firstNonEmptyField}]`);
            if (animate) {
              container.scrollTo({top: target.offsetTop, behavior: 'smooth'});
            } else {
              container.scrollTo(0, target.offsetTop);
            }
          });
        } else if (!inGroup) {
          this.activeTab = 'basic';
          this.$nextTick(() => {
            this.$el.querySelector('.el-tabs__content').scrollTo({top: 0, behavior: 'smooth'});
          });
        }
      });
    },
    query() {
      let queryParams = this.getQueryParams(true);
      this.opts.table.query(queryParams);
      this.$emit('query', queryParams);
    },
    getQueryParams(valueToString) {
      let queryParams = {...this.form};
      if (this.form.registerTimeRange) {
        queryParams.minRegisterTime = this.form.registerTimeRange[0];
        queryParams.maxRegisterTime = this.form.registerTimeRange[1];
        delete queryParams.registerTimeRange;
      }
      delete queryParams.applyTypes;
      queryParams.specialTypes = [...queryParams.specialTypes];
      if (queryParams.isCityAllowanceTarget) {
        if (!queryParams.specialTypes.includes('21')) {
          queryParams.specialTypes.push('21');
        }
        delete queryParams.isCityAllowanceTarget;
      }
      if (queryParams.isCityDistrictAllowanceTarget) {
        if (!queryParams.specialTypes.includes('22')) {
          queryParams.specialTypes.push('22');
        }
        delete queryParams.isCityDistrictAllowanceTarget;
      }

      if (valueToString) {
        for (let field in queryParams) {
          // 如果是数组，转换为CSV
          if (queryParams[field] instanceof Array) {
            queryParams[field] = queryParams[field].join(',');

            if (mutipleValueFields.includes(field) && queryParams[field] && !queryParams[`${field}JoinPredicate`]) {
              queryParams[`${field}JoinPredicate`] = 'or';
            }
          }
        }

        queryParams.address = Object.values(queryParams.area || {}).join('')
          + (queryParams.address || '');

        ['domicileLocation'].forEach(field => {
          if (queryParams[field]) {
            queryParams[field] = Object.values(queryParams[field]).join(',');
          }
        });
      }

      return queryParams;
    }
  }
}
</script>

<style scoped>
>>> .el-drawer__header {
  margin-bottom: 10px;
}
>>> .el-drawer__body {
  padding: 0px 20px;
}
>>> .el-drawer__body > .el-tabs > .el-tabs__content {
  height: 100%;
  overflow: auto;
}
.el-tabs {
  height: calc(100vh - 170px);
}
.el-form {
  width: calc(100% - 20px);
}

.label-info {
  font-size: 12px;
  color: #909399;
}

.el-select.type-select {
  width: 100%;
}

.join-predicate-options >>> .el-radio > .el-radio__label {
  color: #909399;
}

.footer {
  float: left;
  position: absolute;
  bottom: 0px;
  left: 110px;
  width: 100%;
  padding: 20px 20px;
}
.status {
  display: inline-block;
  top: 12px;
  left: 10px;
  width: 200px;
  height: 32px;
  line-height: 1px;
}
</style>
